<script setup>
import { ref, reactive, defineProps, defineEmits,watch } from "vue";
import inputVue from '../base/input.vue'
import dropDownListVue from "./dropDownList.vue";
import { useRouter } from "vue-router";
import { useUserStore } from '@/stores/user'
const router = useRouter();
const userStore = useUserStore()
const props = defineProps({
    search: String,
    edit: String,
    delete: String,
    uid:Number
})
const id = Number(router.currentRoute.value.params.id);//用于获取文本的id

const emits = defineEmits(['changeAside','updateNote','deleteNote'])
let input = ref('')
let dropDownList=ref(null);
let isShow = ref(true)
let tokenId = ref('')

function showDrop(e){
    dropDownList.value.show(e);
}

function showDropDown(){
    tokenId.value=userStore.id //登陆者id
    console.log('id'+tokenId.value);
    console.log('uid'+props.uid);
    if(tokenId.value==props.uid){
        isShow.value
    }else{
        isShow.value=!isShow.value
    }
}

watch(()=>props.uid,()=>{
    showDropDown()
})

</script>

<template>
    <section class="header">

        <b class="icon-chouti ct" @click="emits('changeAside')"></b>
        <span>
            <inputVue v-model="input" placeholder="search">
                <b class="icon-31sousuo"></b>
            </inputVue>
            <button>搜索</button>
        </span>
        <span v-if="isShow">
            <b class="icon-xiala view" @click="showDrop($event)" style="font-size: 1.5em;"></b>
            <dropDownListVue ref="dropDownList">
                <span class="drop">
                    <button @click.stop="emits('deleteNote')">删除</button>
                    <button @click.stop="emits('updateNote')">编辑</button>
                </span>
            </dropDownListVue>
        </span>
    </section>
</template>

<style scoped lang="less">
.header {
    /* height: 10vh; */
    position: sticky;
    padding-bottom: .5em;
    top: 0px;
    box-shadow: 5px 5px 15px 5px var(--color-text-fifth);
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1em;
}

.ct {
    font-size: 2em;
    cursor: pointer;
}
.drop{
    display: flex;
    flex-direction: column;
    button + button{
        margin-top: .5em;
    }
}
</style>